<template>
    <div class="portal-detail-container"
         v-loading="loading"
         element-loading-text="数据加载中, 请稍后..."
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.1)">
        <!--<div class="query-search-thin">
            <el-form :inline="true" size="mini">
                <el-form-item>
                    <el-input placeholder="请输入内容" v-model="queryStr" class="input-with-select">
                        <el-select v-model="queryType" slot="prepend" placeholder="请选择" style="width:85px;">
                            <el-option label="姓名" value="1"></el-option>
                            <el-option label="手机号" value="2"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click="refresh()"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="form.gender" placeholder="选择性别" clearable style="width:100px;" @change="refresh">
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>-->
        <div class="table-wrapper">
            <el-table
                    :data="list"
                    border
                    class="mp-table"
                    style="width: 100%">
                <el-table-column
                        prop="content_name"
                        label="内容名">
                </el-table-column>
                <el-table-column
                        prop="content_code"
                        label="内容编码">
                </el-table-column>

                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <!--<div v-if="isSelected(scope.row)" class="has-selected">已选</div>-->
                        <el-button
                                size="mini"
                                type="text"
                                @click="handleSelect(scope.row, scope.$index)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--<el-pagination
                @size-change="refresh"
                @current-change="refresh"
                :current-page.sync="pagination.current"
                :page-sizes="[10, 20, 50, 100]"
                :page-size.sync="pagination.pageSize"
                layout="total, sizes, prev, pager, next"
                :total="pagination.count">
        </el-pagination>-->
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    import axios from 'axios';

    export default {
        props: [ "show", "groupId", "isSingle" ],
        data() {
            let vm = this;
            return {
                showCreate: false,
                modContentId: null,
                modalName: '新增内容',

                form: {

                },
                selected: [],
                list: [],
                loading: false,
                pagination: {
                    current: 1,
                    pageSize: 10,
                    count: 0
                },
            }
        },
        components: {

        },
        created: function () {
            // this.pid = this.$route.query.pid;
        },
        mounted: function () {
            this.init();
        },
        watch: {
            '$route' (to, from) {

            },
            'show'(val) {
                if(val) {
                    this.init();
                }
            }
        },
        computed: mapState([
            /*'mainMenu',
             'menuHide'*/
        ]),
        methods: {
            ...mapActions([

            ]),
            init() {
                this.selected = [];
                this.refresh();
            },
            async refresh() {
                let data = await this.$japi.admin.getAdminMenuTree({});

                if(data) {
                    this.list = data.contents;
                }
                /*
                axios.get('/mgr/api/admin/menustree', {
                    params: {
                        use_type: 'WEB'
                    }
                }).then(({ data }) => {
                    if(data) {
                        this.list = data.contents;
                    }
                });*/
            },
            parseDatas(data) {

                let code = _.get(data, 'code');
                if(code == 200) {
                    this.pagination.count = _.get(data, 'data.count', 0);
                    this.list = _.get(data, 'data.rows', []);
                }
            },
            closeWin(flag){

                this.showCreate = false;
                if(flag) {
                    this.refresh();
                }
            },
            handleSelect(s) {

                if(!s || !s.content_id) {
                    return;
                }
                if(_.find(this.selected, { content_id: s.content_id })) {
                    return;
                }

                this.selected.push(s);

                if(this.isSingle) {
                    this.save();
                }
            },
            removeSelected(sid) {
                if(!sid) {
                    return;
                }

                let idx = _.findIndex(this.selected, { content_id: sid });

                if(idx < 0) {
                    return;
                }

                this.selected.splice(idx, 1);
            },
            isSelected(cnt) {

                let isSel = false;

                if(!cnt || !cnt.content_id) {
                    return false;
                }

                isSel = _.find(this.selected, {
                    id: cnt.content_id
                });

                if(!isSel) {
                    let isSel1 = _.find(this.list, {
                        content_id: cnt.content_id
                    });

                    let isSel2 = _.find(this.list, {
                        content_id: cnt.content_id
                    });

                    isSel = isSel1 || isSel2;
                }

                return isSel;
            },
            save() {
                this.$emit('close', this.selected);
            }
        }
    }
</script>

<style>

</style>
